import {
  Key,
  ReactChild,
  ReactFragment,
  ReactPortal,
  useEffect,
  useState,
} from 'react';
import { Link, useDispatch, useSelector, ArticleModelState } from 'umi';
import 'antd/dist/antd.css';
import styles from './index.less';
import { Input, Button, Tag, Card, Row, Col, message } from 'antd';

function category(this: any) {
  const { tagList } = useSelector(
    (state: { article: ArticleModelState }) => state.article,
  );

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch({
      type: 'article/getTagList',
    });
  }, []);

  const [flag, flagSet] = useState(false);
  const [label, setlabel] = useState('');
  const [value, setvalue] = useState('');
  const [id, setid] = useState('');
  // 返回添加
  const onCancelAdding = () => {
    flagSet(false);
    setlabel('');
    setvalue('');
  };

  // 阻止冒泡
  const onChangeLabel = (e: any) => {
    setlabel(e.target.value);
  };
  const onChangeValue = (e: any) => {
    setvalue(e.target.value);
  };
  // 删除
  const TagDel = () => {
    const user = JSON.parse(localStorage.getItem('user') as string);
    if (user.role === 'admin') {
      dispatch({
        type: 'article/getTagDel',
        payload: id,
      });
      dispatch({
        type: 'article/getTagList',
      });
      message.success('操作成功');
    } else {
      message.error('用户权限不足');
    }
  };
  // 回显
  function btn_show(item: any) {
    flagSet(true);
    setlabel(item.label);
    setvalue(item.value);
    setid(item.id);
  }
  // 保存
  const onAdding = () => {
    const user = JSON.parse(localStorage.getItem('user') as string);
    if (user.role === 'admin') {
      dispatch({
        type: 'article/getTagSave',
        payload: {
          label,
          value,
        },
      });
      dispatch({
        type: 'article/getTagList',
      });
      message.success('操作成功');
    } else {
      message.error('用户权限不足');
    }
  };
  return (
    <main className={styles.layout_Content}>
      <header>
        <div className={styles.breadcrumb}>
          <span>
            <span>
              <Link to={'/'}>工作台</Link>
            </span>
            <span className={styles.breadcrumb_Separator}>/</span>
          </span>
          <span>
            <span>
              <Link to={'/article'}>所有文章</Link>
            </span>
            <span className={styles.breadcrumb_Separator}>/</span>
          </span>
          <span>
            <span>
              <Link to={'/article/category'}>分类管理</Link>
            </span>
            <span className={styles.breadcrumb_Separator}>/</span>
          </span>
        </div>
        <div style={{ margin: '12px 0 0', color: 'red' }}></div>
      </header>
      <main className={styles.contents}>
        <div className={styles.Category_content}>
          <div className={styles.Category_left}>
            <div className={styles.Category_card}>
              <Card
                title={flag ? '添加标签' : '管理标签'}
                bordered={false}
                style={{ width: 500 }}
              >
                <Row>
                  <Col
                    span={24}
                    style={{
                      position: 'relative',
                      maxWidth: '100%',
                      minHeight: '1px',
                      margin: '0 0 24px',
                    }}
                  >
                    <Input
                      placeholder="输入分类名称"
                      value={label}
                      onChange={onChangeLabel}
                    />
                  </Col>
                </Row>
                <Row>
                  <Col
                    span={24}
                    style={{
                      position: 'relative',
                      maxWidth: '100%',
                      minHeight: '1px',
                      margin: '0 0 24px',
                    }}
                  >
                    <Input
                      placeholder="输入分类值（请输入英文，作为路由使用）"
                      value={value}
                      onChange={onChangeValue}
                    />
                  </Col>
                </Row>
                {flag ? (
                  <div className={styles.btn_show}>
                    <div>
                      <Button type="primary">更新</Button>
                      <Button type="dashed" onClick={onCancelAdding}>
                        返回添加
                      </Button>
                    </div>
                    <Button danger onClick={TagDel}>
                      删除
                    </Button>
                  </div>
                ) : (
                  <div className={styles.btn_show}>
                    <Button type="primary" onClick={onAdding}>
                      保存
                    </Button>
                  </div>
                )}
              </Card>
            </div>
          </div>
          <div className={styles.Category_right}>
            <div className={styles.card_bordered}>
              <div className={styles.card_header}>
                <div className={styles.card_header_wapper}>
                  <div className={styles.card_head_title}>所有分类</div>
                </div>
              </div>
              <div className={styles.card_body}>
                {tagList.map((item: { label: boolean | ReactChild | ReactFragment | ReactPortal | null | undefined; }, index: Key | null | undefined) => {
                  return (
                    <Tag
                      key={index}
                      className="site-tag-plus"
                      onClick={btn_show.bind(index, item)}
                    >
                      {item.label}
                    </Tag>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
      </main>
    </main>
  );
}
export default category;
